import {presetPrimaryColors} from "@/utils/colorGroup.ts";
import {useState} from "react";
import ColorWrap from "@/views/color/style.ts";

const Color = () => {
  const colors = Object.values(presetPrimaryColors)
  const [currentColor, setCurrentColor] = useState(0)
  const handleColorClick = (color: number) => {
    setCurrentColor(color)
  }
  return (
    <ColorWrap>
      <div className="wrap">
        <div className={'color-group'}>
          {colors.map((cItem, cIndex) => {
            return (<div
              className={['color-item', cIndex === currentColor ? 'active' : ''].join(' ')}
              key={cItem}
              onClick={() => handleColorClick(cIndex)}
              style={{background: colors[cIndex]}}
            ></div>)
          })}
        </div>
        <div className={'show-current'}>
          <span>current color</span>
          <i className={'color'} style={{background: colors[currentColor]}}></i>
        </div>
      </div>
    </ColorWrap>
  )
}

export default Color
